
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>房源详情</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="<%=path%>/statics/js/rem.js"></script>
    <script type="text/javascript" src="<%=path%>/statics/js/jquery-1.8.3.min.js"></script>
    <script src="<%=path%>/statics/js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/page.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/bootstrap-3.3.7-dist/css/bootstrap.css"/>



    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })
    </script>
    <style type="text/css">
        .Date_lr {
            width: 50%;
            text-align: center;
        }

        .span21 {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-size: 14px;
            color: #666;
            border: 1px solid #e5e5e5;
            padding: 2px 8px;
            line-height: 20px;
            border-radius: .2rem;
            background-color: #fff;
        }

        #checkinout {
            height: 50px;
            line-height: 50px;
            position: relative;
            /*margin: 10px;*/
            padding: 2px 0;
            display: -webkit-box;
            display: flex;
            border: 1px solid #e5e5e5;
            border-radius: .02rem;
            background-color: #fff;
        }

        #firstSelect p {
            line-height: 25px;
            color: #999;
            font-size: 12px;
        }

        #startDate {
            border: 0;
            position: absolute;
            left: 0;
            margin: 0 auto;
            width: 50%;
            font-size: 16px;
            color: #F16B80;
            text-align: center;
        }

        #endDate {
            border: 0;
            position: absolute;
            right: 0;
            margin: auto 0;
            width: 50%;
            font-size: 16px;
            color: #F16B80;
        }

        .mask_calendar {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, .4);
            display: none;
            z-index: 9999;
        }

        .calendar {
            height: 400px;
            position: fixed;
            bottom: 0;
            left: 0;
        }

        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }

        @keyframes slideInDown {
            from {
                transform: translate3d(0, -100%, 0);
                visibility: visible;
            }
            to {
                transform: translate3d(0, 0, 0);
            }
        }

        .slideInDown {
            animation-name: slideInDown;
        }
    </style>

</head>

<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<div class="headertwo clearfloat" id="header">
    <a href="javascript:history.go(-1)" class="fl box-s"><i class="iconfont icon-arrow-l fl"></i></a>
    <p class="fl">房源详情</p>
    <a href="#" class="fr" onClick="toshare()"><i class="iconfont icon-fenxiang fl"></i></a>
</div>

<!--分享内容-->
<div class="am-share">
    <h3 class="am-share-title">分享到</h3>
    <ul class="am-share-sns">
        <li><a href="#"> <i class="iconfont icon-weixin weixin"></i> <span>微信</span> </a></li>
        <li><a href="#"> <i class="iconfont icon-qq qq"></i> <span>QQ</span> </a></li>
        <li><a href="#"> <i class="iconfont icon-weibo weibo"></i> <span>微博</span> </a></li>
        <li><a href="#"> <i class="iconfont icon-renrenwang renren"></i> <span>人人</span> </a></li>
    </ul>
    <div class="am-share-footer">
        <button class="share_btn">取消</button>
    </div>
</div>

<div class="clearfloat" id="main">
    <div class="service clearfloat">
        <div class="slider one-time">
            <c:set var="imgs" value="${fn:split(houseInfo.imgName,',')}"></c:set>
            <c:forEach items="${imgs}" var="img" >
                <div>
                    <img src="<%=path%>/statics/upload/${img}"/>
                    <div class="tit clearfloat box-s">
                        <p class="one">${houseInfo.title}</p>
                        <p class="two">${houseinfo.cityName}</p>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>

    <div class="service-top clearfloat box-s">
        <div class="left fl clearfloat box-s">
            <p class="tit titwo">${houseInfo.price}<span>元/月</span></p>
            <p class="fu-tit">${houseInfo.shi}室${houseInfo.ting}厅   |  ${houseInfo.area}m²  |  ${houseInfo.ftypeName}</p>
        </div>
       <%-- <input id="usersid" type="hidden" value="${user.users_id}">--%>
        <input id="houseId" type="hidden" value="${houseId}">
        <input id="coll" type="hidden" value="${collection.collection}">
        <input id="count" type="hidden" value="${count}">
        <input type="hidden" value="">
        <div id="Collection" class="right fl clearfloat">
            <i class="glyphicon glyphicon-star" <c:if test="${collection.collection==1}">style="color: #F16B80" </c:if>></i>
            <c:if test="${collection.collection==1}"><p style="color: #F16B80;" >已收藏</p></c:if>
            <c:if test="${collection.collection!=1}"><p >收藏</p></c:if>
        </div>
    </div>

    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>房屋信息</p>
        </div>
        <div class="service-list clearfloat box-s">
            <ul>
                <li>类型：${houseInfo.ftypeName}</li>
                <li>地址：${houseInfo.xxaddress}</li>
                <li>现状：空闲</li>
                <li>朝向：南</li>
            </ul>
            <p class="service-tit">交通：${houseInfo.traffic}</p>
        </div>
    </div>

    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>配置设施</p>
        </div>
        <div class="service-ties clearfloat box-s">
            <ul>
                <c:set var="facilitys" value="${fn:split(houseInfo.facility,',')}"></c:set>
                <c:forEach items="${facilitys}" var="facility">
                    <c:if test="${facility eq '床'}">
                        <li><i class="iconfont icon-chuangdian"></i>床</li>
                    </c:if>
                    <c:if test="${facility eq '衣柜'}">
                        <li><i class="iconfont icon-dpc"></i>衣柜</li>
                    </c:if>
                    <c:if test="${facility eq '沙发'}">
                        <li><i class="iconfont icon-shafa"></i>沙发</li>
                    </c:if>
                    <c:if test="${facility eq '燃气'}">
                        <li><i class="iconfont icon-7"></i>燃气</li>
                    </c:if>
                    <c:if test="${facility eq '洗衣机'}">
                        <li><i class="iconfont icon-xiyiji"></i>洗衣机</li>
                    </c:if>
                    <c:if test="${facility eq '网络'}">
                        <li><i class="iconfont icon-wifi"></i>网络</li>
                    </c:if>
                    <c:if test="${facility eq '冰箱'}">
                        <li><i class="iconfont icon-bingxiang"></i>冰箱</li>
                    </c:if>
                    <c:if test="${facility eq '书桌'}">
                        <li><i class="iconfont icon-bangongzhuo"></i>书桌</li>
                    </c:if>
                    <c:if test="${facility eq '空调'}">
                        <li><i class="iconfont icon-kongdiao"></i>空调</li>
                    </c:if>
                    <c:if test="${facility eq '餐桌'}">
                        <li><i class="iconfont icon-zhuozi"></i>餐桌</li>
                    </c:if>
                    <c:if test="${facility eq '椅子'}">
                        <li><i class="iconfont icon-yizi"></i>椅子</li>
                    </c:if>
                    <c:if test="${facility eq '微波炉'}">
                        <li><i class="iconfont icon-weibolu"></i>微波炉</li>
                    </c:if>
                    <c:if test="${facility eq '电视'}">
                        <li><i class="iconfont icon-dianshi"></i>电视</li>
                    </c:if>
                    <c:if test="${facility eq '热水器'}">
                        <li><i class="iconfont icon-reshui"></i>热水器</li>
                    </c:if>
                    <c:if test="${facility eq '橱柜'}">
                        <li><i class="iconfont icon-chugui"></i>橱柜</li>
                    </c:if>
                    <c:if test="${facility eq '油烟机'}">
                        <li><i class="iconfont icon-xiyouyanji"></i>油烟机</li>
                    </c:if>
                    <c:if test="${facility eq '电梯'}">
                        <li><i class="iconfont icon-gsdt"></i>电梯</li>
                    </c:if>
                    <c:if test="${facility eq '供暖'}">
                        <li><i class="iconfont icon-nuanqi"></i>供暖</li>
                    </c:if>
                    <c:if test="${facility eq '车位'}">
                        <li><i class="iconfont icon-tingchewei"></i>车位</li>
                    </c:if>
                    <c:if test="${facility eq '门禁'}">
                        <li><i class="iconfont icon-menjin"></i>门禁</li>
                    </c:if>


                </c:forEach>
            </ul>
        </div>
    </div>

    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>房源描述</p>
        </div>
        <p class="tit box-s">
            ${houseInfo.introduce}
        </p>
    </div>

</div>

<div class="footer-look clearfloat" id="footer">
    <a style="cursor: pointer" class="modaltrigger">我要预订</a>
</div>
</body>

<script type="text/javascript" src="<%=path%>/statics/js/jquery-1.8.3.min.js" ></script>
<script src="<%=path%>/statics/layui/layui.all.js"></script>
<script type="text/javascript" src="<%=path%>/statics/slick/slick.min.js"></script>
<script type="text/javascript" src="<%=path%>/statics/js/jquery.leanModal.min.js"></script>
<script type="text/javascript" src="<%=path%>/statics/js/tchuang.js"></script>
<script type="text/javascript" src="<%=path%>/statics/js/hmt.js"></script>
<script type="text/javascript" src="<%=path%>/statics/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript">
    $('.one-time').slick({
        dots: true,
        infinite: false,
        speed: 300,
        slidesToShow: 1,
        touchMove: false,
        slidesToScroll: 1
    });
    var count=$("#count").val();
    if(count==0){
        $("#Collection").click(function(){
            var user = <%=session.getAttribute("userJson")%>;
            if(user==null || user=="" || user==undefined){
                var layer = layui.layer
                    , form = layui.form;
                layer.msg('请登录');
                setTimeout(function(){
                    location.href="<%=path%>/jsp/sign.jsp";
                },1000)
            }else{
                var layer = layui.layer
                    ,form = layui.form;
                layer.msg('已收藏');
                var SC= $("#coll").val();
                if(SC==0){
                    $.ajax({
                        type:"get",
                        url:"<%=path%>/com/updSc1.json",
                        data:{"houseId":$("#houseId").val()},
                        dataType:"json",
                        success:function(result){
                            if (result.ok==true){
                            }
                        }
                    })
                    $("#coll").val("1");
                    $("#Collection p").html("已收藏");
                    $("#Collection p,#Collection i").css({"color":"#F16B80"});
                }else if(SC==1){
                    var layer = layui.layer
                        ,form = layui.form;
                    layer.msg('取消收藏');
                    $.ajax({
                        type:"get",
                        url:"<%=path%>/com/updSc2.json",
                        data:{"houseId":$("#houseId").val()},
                        dataType:"json",
                        success:function(result){
                            if (result.ok==true){
                            }
                        }
                    })
                    $("#coll").val("0");
                    $("#Collection p").html("收藏");
                    $("#Collection p,#Collection i").css({"color":"#888888"});
                    SC.val("0");
                }
            }
        })

    }else{
        $("#Collection").click(function(){
            var layer = layui.layer
                ,form = layui.form;
            layer.msg('自己的房子看看就好了');
            return;
        })

    }
</script>
<!--分享js-->
<script type="text/javascript">
    $(function(){
        $(".modaltrigger").click(function () {
            var user = <%=session.getAttribute("userJson")%>;
            if(user==null || user=="" || user==undefined){
                var layer = layui.layer
                    , form = layui.form;
                layer.msg('请登录');
                setTimeout(function(){
                    location.href="<%=path%>/jsp/sign.jsp";
                },1000)
            }else if("${houseInfo.userId}"==user.users_id){
                var layer = layui.layer
                    , form = layui.form;
                layer.msg('自己的房子不能预订噢');
                return ;
            }else{
                location.href="<%=path%>/orders/pay-rent.html/${houseInfo.houseId}";
            }
        })
    })
</script>


</html>
